<template>
	<view class="guide-wrapper-container bg-primary full box relative">
		<scroll-view class="full" scroll-y>
			<view class="guide-desc-wrap">
				<view class="guide-header">
					<view class="header-label">
						<text>乡邻：{{ name }}</text>
					</view>
					<view v-if="!isSelf" class="collect-wrap" @click="collectHandle">
						<u-icon :name="isCollect ? 'star-fill' : 'star'" :color="isCollect ? '#8BDCFF':'#1A1A1A'"
							size="26" />
					</view>
					<view class="edit-btn" v-else>
						<image @click="editHandle" :src="sourceUrl + '/wenbenshuru.png'" class="edit-icon"
							mode="aspectFill"></image>
						<!-- <text>编辑</text> -->
					</view>
				</view>
				<view class="guide-content">
					<view class="guide-image">
						<image @click="$previewImage(image)" :src="image" class="full" mode="aspectFill"></image>
					</view>
					<view class="guide-desc-remark">
						<text>{{ desc }}</text>
					</view>
				</view>
				<view class="video-title">
					<text>视频介绍</text>
				</view>
				<view class="video-wrapper relative">
					<image :src="coverImage" mode="aspectFill" class="video-target"></image>
					<view class="play-btn" @click="playVideo">
						<image :src="sourceUrl + '/kaishi1.png'" class="begin-icon"></image>
					</view>
					<!-- <video object-fit="cover" class="video-target" :autoplay="false" :src="video"></video> -->
				</view>
			</view>
			<template v-if="!isSelf">
				<view class="guide-line-wrap">
					<view class="line-header">
						<text>我的线路</text>
					</view>
				</view>
				<view class="line-list-wrap">
					<view class="line-item" v-for="(item,index) in lineList" :key="index">
						<line-item :record="item" />
					</view>
				</view>
			</template>
		</scroll-view>
		<view class="absolute">
			<u-loading-page :loading="loading" />
		</view>
	</view>
</template>

<script>
	import LineItem from '../components/line-item.vue'
	export default {
		components: { LineItem },
		onShareTimeline() {
			const { name, image, id } = this
			return {
				title: '乡邻:' + name,
				imageUrl: image,
				query: `id=${id}`
			}
		},
		onShareAppMessage() {
			const { name, image, id } = this
			return {
				title: '乡邻:' + name,
				path: '/pages-bundle/guide-detail/guide-detail?id=' + id,
				imageUrl: image
			}
		},
		onLoad(ev) {
			this.openWxShare()
			if (ev.hasOwnProperty('id')) {
				const { id } = ev
				this.id = id
				this.initData(id)
			}
			if (ev.hasOwnProperty('type')) {
				this.isSelf = ev.type === 'self'
			}
			if (ev.hasOwnProperty('event')) {
				this.event = !!(ev.event)
			}
		},
		methods: {
			playVideo() {
				uni.navigateTo({
					url: '/pages-bundle/video-preview/video-preview?url=' + this.video
				})
			},
			editHandle() {
				const { name, image, desc, video, coverImage, mobile, cityId } = this
				uni.navigateTo({
					url: '/pages-bundle/guide-register/guide-register?type=edit',
					success: ev => {
						ev.eventChannel.emit('editInfo', {
							name,
							image,
							desc,
							video,
							coverImage,
							mobile,
							cityId
						})
					},
					events: {
						updateData: () => {
							this.loading = true
							this.initData(this.id)
						},
					}
				})
			},
			generateLine(lineList, avatar, username) {
				if (!lineList || !lineList.length) return
				const result = lineList.map(item => {
					const {
						id,
						line_name: name,
						car_type: car,
						end_place: end,
						start_place: start,
						day,
						cover_image: image
					} = item
					return { id, name, car, end, start, day, avatar, username, image }
				})
				this.lineList = result
			},
			async collectHandle() {
				const { isCollect, id } = this
				const resp = await this.$request({
					url: isCollect ? "/TourGuide/cancelCollect" : "/TourGuide/addCollect",
					data: { id },
				})
				const { code, msg } = resp
				const title = code !== 1 ? msg : isCollect ? '取消成功' : '收藏成功'
				this.$toast({ title })
				if (code !== 1) return
				this.isCollect = !isCollect
				if (this.event && isCollect) {
					uni.$emit('collectChange', { type: 1 })
				}
			},
			async initData(id) {
				const resp = await this.$request({
					url: "/TourGuide/detailsTourGuide",
					data: { id },
				})
				console.log(resp, 'resp');
				await this.$delay(300)
				const { code, data, msg } = resp
				if (code !== 1) return this.$toast({ title: msg }, () => {
					uni.navigateBack()
				})
				const {
					name,
					introduce,
					is_collect,
					image,
					video,
					line,
					userInfo: { avatar },
					cover_image,
					mobile,
					city_id
				} = data
				this.isCollect = is_collect
				this.name = name
				this.desc = introduce
				this.image = image
				this.video = video
				this.avatar = avatar
				this.coverImage = cover_image
				this.generateLine(line, avatar, name)
				this.loading = false
				this.mobile = mobile
				this.cityId = city_id
			},
		},
		computed: {},
		data() {
			return {
				event: false,
				isCollect: false,
				name: '',
				desc: '',
				image: '',
				video: '',
				lineList: [],
				avatar: '',
				loading: true,
				isSelf: false,
				coverImage: '',
				mobile: '',
				cityId: ''
			}
		}
	}
</script>

<style lang="scss" scoped>
	.guide-wrapper-container {
		padding: 32rpx 32rpx env(safe-area-inset-bottom);
		box-sizing: border-box;



		.line-list-wrap {
			margin-top: 16rpx;

			.line-item {
				margin-bottom: 24rpx;

				&:last-child {
					margin-bottom: 0;
				}
			}
		}

		.line-header-title {
			height: 44rpx;
			font-size: 28rpx;
			color: rgba(0, 0, 0, 0.9);
			font-weight: bold;
			line-height: 44rpx;
		}

		.guide-line-wrap {
			margin-top: 32rpx;

			.line-item-list {
				margin-top: 16rpx;
			}

			.line-header {
				height: 44rpx;
				font-size: 28rpx;
				color: rgba(0, 0, 0, 0.9);
				font-weight: bold;
				line-height: 44rpx;
			}
		}

		.guide-desc-wrap {
			padding: 32rpx 24rpx;
			box-sizing: border-box;
			position: relative;
			background-color: #ffffff;
			border-radius: 16rpx;

			.video-wrapper {
				margin-top: 16rpx;
				overflow: hidden;
				border-radius: 16rpx;
				width: 100%;
				height: 332rpx;

				.play-btn {
					width: 90rpx;
					height: 90rpx;
					background: rgba(29, 33, 41, 0.6);
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					border-radius: 50%;
					overflow: hidden;
					display: flex;
					align-items: center;
					justify-content: center;

					.begin-icon {
						width: 42rpx;
						height: 42rpx;
					}
				}

				.video-target {
					width: 100%;
					height: 100%;
				}
			}

			.video-title {
				height: 44rpx;
				font-size: 28rpx;
				color: rgba(0, 0, 0, 0.9);
				line-height: 44rpx;
				margin-top: 32rpx;
			}

			.guide-content {
				display: flex;
				margin-top: 20rpx;
				padding: 0 8rpx;
				box-sizing: border-box;

				.guide-desc-remark {
					flex: 1;
					word-break: break-all;
					font-size: 20rpx;
					color: rgba(0, 0, 0, 0.6);
					line-height: 32rpx;
				}

				.guide-image {
					width: 302rpx;
					height: 388rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					overflow: hidden;
					margin-right: 20rpx;
					box-sizing: border-box;
					position: relative;
				}
			}

			.guide-header {
				display: flex;
				align-items: center;

				.edit-btn {
					margin-left: auto;
					display: flex;
					align-items: center;

					.edit-icon {
						width: 48rpx;
						height: 48rpx;
					}
				}

				.collect-wrap {
					margin-left: auto;
				}

				.header-label {
					height: 44rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: rgba(0, 0, 0, 0.9);
					line-height: 44rpx;
				}
			}
		}
	}
</style>